<template>
  <div class="productList">
    <!-- 用户数据 -->
    <div class="tableform">
      <el-button
        type="primary"
        @click="addproduct"
      >添加商品</el-button>
      <el-table
        border
        ref="multipleTable"
        :data="productDetailList"
        tooltip-effect="dark"
        style="width: 100%;margin-top:10px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        >
        </el-table-column>
        <el-table-column
          prop="id"
          label="商品编号"
          width="55"
        >
        </el-table-column>
        <el-table-column
          prop="proName"
          label="商品名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="proDesc"
          label="商品描述"
          show-overflow-tooltip
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="num"
          label="商品库存"
          show-overflow-tooltip
          width="80"
        >
        </el-table-column>
        <el-table-column
          prop="size"
          label="商品尺寸"
          show-overflow-tooltip
          width="80"
        >
        </el-table-column>
        <el-table-column
          prop="statu"
          label="是否下架"
          show-overflow-tooltip
          width="100"
        >
          <!-- 商品过滤器 -->
          <template slot-scope="scope">
            <span>{{scope.row.statu|capitalize}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="150"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleout(scope.row)"
              type="danger"
            >下架</el-button>
            <el-button
              size="mini"
              @click="handleEdit(scope.row)"
              type="primary"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      class="pageination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 添加分类 -->
    <el-dialog
      title="添加商品"
      :visible.sync="adddialogFormVisible"
    >
      <el-form :model="addForm">
        <el-form-item
          label="请选择品牌"
          width="80"
        >
          <el-select
            v-model="addForm.brandId"
            placeholder="请选择品牌"
            width="80"
          >
            <el-option
              v-for="item in productoptions"
              :key="item.id"
              :label="item.brandName"
              :value="item.id"
            > </el-option>
          </el-select>
        </el-form-item>
        <el-input
          v-model="addForm.proName"
          auto-complete="off"
          placeholder="请输入产品名称"
        ></el-input>
        <el-input
          v-model="addForm.proDesc"
          auto-complete="off"
          placeholder="请输入产品描述"
        ></el-input>
        <el-input
          v-model="addForm.num"
          auto-complete="off"
          placeholder="请输入产品数量"
        ></el-input>
        <el-input
          v-model="addForm.size"
          auto-complete="off"
          placeholder="请输入产品尺码，如20-39"
        ></el-input>
        <el-input
          v-model="addForm.oldPrice"
          auto-complete="off"
          placeholder="请输入商品原价"
        ></el-input>
        <el-input
          v-model="addForm.price"
          auto-complete="off"
          placeholder="请输入商品折扣价"
        ></el-input>
        <!-- 上传图片 -->
        <el-upload
          class="upload-demo"
          name='pic1'
          action="http://127.0.0.1:3000/product/addProductPic"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :on-success="uploadSuccess"
          :before-upload='uploadBeforeValid'
          :with-credentials='true'
          list-type="picture"
        >
          <el-button
            size="small"
            type="primary"
          >请选择需要上传的图片</el-button>
          ** 请选择三张图片
          <div
            slot="tip"
            class="el-upload__tip"
            v-if='is_show'
          >只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="adddialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addProduct"
        >保存商品</el-button>
      </div>
    </el-dialog>
    <!-- 图片预览弹框 -->
    <el-dialog
      title="图片预览"
      :visible.sync="picdialogFormVisible"
    >
      <img
        :src="addForm.productpic"
        alt=""
      >
    </el-dialog>
    <!-- 编辑分类 -->
    <el-dialog
      title="编辑商品"
      :visible.sync="editdialogFormVisible" >
      <el-form :model="editForm">
        <el-form-item
          label="请选择品牌"
          width="80"
        >
          <el-select
            v-model="editForm.brandId"
            placeholder="请选择品牌"
            width="80"
          >
            <el-option
              v-for="item in productoptions"
              :key="item.id"
              :label="item.brandName"
              :value="item.id"
            > </el-option>
          </el-select>
        </el-form-item>
        <el-input
          v-model="editForm.proName"
          auto-complete="off"
          placeholder="请输入产品名称"
        ></el-input>
        <el-input
          v-model="editForm.proDesc"
          auto-complete="off"
          placeholder="请输入产品描述"
        ></el-input>
        <el-input
          v-model="editForm.num"
          auto-complete="off"
          placeholder="请输入产品数量"
        ></el-input>
        <el-input
          v-model="editForm.size"
          auto-complete="off"
          placeholder="请输入产品尺码，如20-39"
        ></el-input>
        <el-input
          v-model="editForm.oldPrice"
          auto-complete="off"
          placeholder="请输入商品原价"
        ></el-input>
        <el-input
          v-model="editForm.price"
          auto-complete="off"
          placeholder="请输入商品折扣价"
        ></el-input>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="editdialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="editProduct"
        >确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { queryProductDetailList, queryCategorySecond, addProduct, updateProduct } from '@/api'
export default {
  data () {
    return {
      // 渲染数据
      productDetailList: [
        {
          id: '',
          proName: '',
          oldPrice: '',
          price: '',
          proDesc: '',
          size: '',
          statu: '',
          updateTime: '',
          nun: ''
        }
      ],
      multipleSelection: [],
      //   分页
      page: 1,
      pageSize: 10,
      total: 0,
      //  控制添加分类的显示与隐藏
      adddialogFormVisible: false,
      //  控制修改分类的显示与隐藏
      editdialogFormVisible: false,
      //   添加分类
      addForm: {
        // 产品名称
        proName: '',
        // 老价格
        oldPrice: '',
        // 价格
        price: '',
        // 产品描述
        proDesc: '',
        // 产品尺寸
        size: '',
        // 产品上下架
        statu: '1',
        // 用户库存
        num: '',
        // 归属品牌
        brandId: '',
        productpic: []
      },
      // 选择品牌
      productoptions: [
        {
          value: '',
          label: ''
        }
      ],
      //   编辑分类
      editForm: {
        id: '',
        // 产品名称
        proName: '',
        // 老价格
        oldPrice: '',
        // 价格
        price: '',
        // 产品描述
        proDesc: '',
        // 产品尺寸
        size: '',
        // 产品上下架
        statu: '',
        // 用户库存
        num: '',
        // 归属品牌
        brandId: ''
      },
      // // 存储上传图片
      // productpic: [],
      // 上传的图片列表
      fileList: [],
      // 控制图片预览弹框的显示和隐藏
      picdialogFormVisible: false,
      pic1: '',
      // 上传图片下方的文字显示与否
      is_show: false
    }
  },
  methods: {
    //   是否下架
    handleout (row) {},
    // 分页
    handleSizeChange (value) {
      console.log(value)
      this.pageSize = value
      this.init()
    },
    handleCurrentChange (value) {
      console.log(value)
      this.page = value
      this.init()
    },
    // 多选
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 编辑商品管理
    handleEdit (row) {
      console.log(row)
      //   控制修改分类对话框的显示和隐藏
      this.editdialogFormVisible = true
      this.queryproduct()
      this.editForm.id = row.id
      this.editForm.proName = row.proName
      this.editForm.oldPrice = row.oldPrice
      this.editForm.price = row.price
      this.editForm.proDesc = row.proDesc
      this.editForm.size = row.size
      this.editForm.statu = row.statu
      this.editForm.num = row.num
      this.editForm.brandId = row.brandId
    },
    // 实现添加商品功能
    addProduct () {
      // console.log(this.addForm, '22222222')
      // 调用接口，实现添加分类的功能
      addProduct(this.addForm)
        .then(res => {
          // console.log(res)
          if (res.success) {
            this.$message.success('商品添加成功')
            this.adddialogFormVisible = false
            this.addForm = ''
            this.init()
          } else {
            this.$message.error('商品添加失败')
          }
        })
    },
    // 实现编辑商品功能
    editProduct () {
      // 调用接口,实现分类的修改
      updateProduct(this.editForm)
        .then(res => {
          // console.log(res)
          if (res.success) {
            this.$message.success('商品修改成功')
            this.editdialogFormVisible = false
            this.init()
          } else {
            this.$message.error('商品修改失败')
          }
        })
    },
    // 上传图片
    // 文件列表移除文件时 --- 不能将本地存储的图片删除
    handleRemove (file, fileList) {
      // console.log(file)
      if (!file.response) {
        return false
      }
      // 获取要删除的图片路径
      var filepath = file.response.picAddr
      // findIndex:可以查找指定数据的所在索引位置：它有一个回调函数，回调函数有一个参数，就是遍历数组时每次遍历到的成员，每次使用一个成员的数据进行函数的业务逻辑的计算，如果满足条件，则返回当前索引
      // 查找要删除的图片的索引
      var index = this.addForm.productpic.findIndex(item => {
        return item.addForm.productpic === filepath
      })
      // 删除对应的图片
      this.addForm.productpic.splice(index, 1)
    },
    // 图片预览
    handlePreview (file) {
      // console.log(file)
      this.picdialogFormVisible = true
      // 设置图片路径
      this.addForm.productpic = 'http://localhost:3000/' + file.response.picAddr
    },
    // 图片上传成功时
    uploadSuccess (response, file, fileList) {
      // console.log(response, file, fileList)
      //   将当前上传成功的文件信息存储到数组
      this.addForm.productpic.push({picName: response.picName, picAddr: response.picAddr})
    },
    // 上传图片之前
    uploadBeforeValid (file) {
      // console.log(file, '111111111111')
      // 判断图片大小是否符合
      if (file.size > 500 * 1024) {
        // 给出提示
        this.$message.warning('图片大小大于指定大小')
        return false
      }
      if (file.size > 500000) {
        this.is_show = true
        // 如果返回false.则中止上传操作
        return false
      } else {
        this.is_show = false
      }
    },
    // 添加商品选择品牌列表
    addproduct () {
      this.adddialogFormVisible = true
      this.queryproduct()
    },
    queryproduct () {
      // 调用接口,获取品牌
      queryCategorySecond({ page: this.page, pageSize: this.pageSize })
        .then(result => {
          // console.log(result)
          this.productoptions = result.rows
        })
    },
    // 动态渲染数据
    init () {
      // 调用接口渲染数据
      queryProductDetailList({ page: this.page, pageSize: this.pageSize }).then(
        res => {
          // console.log(res)
          this.productDetailList = res.rows
          this.total = res.total
        }
      )
    }
  },
  mounted () {
    this.init()
  },
  // 商品是否已上架的过滤器
  filters: {
    capitalize: function (value) {
      if (value === 1) {
        return '已上架商品'
      } else if (value === 0) {
        return '已下架商品'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.productList {
  margin: 10px 0;
  .tableform {
    padding: 30px 20px;
    background-color: #fff;
  }
  .cell {
    text-align: center;
  }
  .pageination {
    margin-top: 15px;
    background-color: #eee;
    padding: 10px 20px;
  }
  el-table {
    height: 300px;
    overflow: scroll;
  }
  .el-input {
    margin: 5px 0;
  }
}
</style>
